<!-- 专业树选择 -->
<template>
  <el-dialog
    title="请选择专业(支持选择多个专业)"
    :visible.sync="open"
    width="800px"
    append-to-body
    @close="closeDialog"
    class="dialog business-dialog bordered"
    :close-on-click-modal="false"
  >
    <div class="major-select-wrapper">
      <div class="tree-wrapper" v-loading="loading">
        <div class="title">请选择：</div>
        <el-tree
          class="tree-box"
          ref="tree"
          :props="treeProps"
          :load="loadNode"
          lazy
          :node-key="'id'"
          :draggable="false"
          :current-node-key="ids.length > 0 ? ids[0] : ''"
          :show-checkbox="true"
          @node-click="nodeClickHandler"
          @check="nodeCheckHandler"
          :check-on-click-node="false"
          :default-expand-all="true"
        />
      </div>
      <div class="result-wrapper">
        <div class="title">已选择专业({{ selectedNodes.length }})</div>
        <ul class="result-list">
          <li v-for="(item, index) in selectedNodes" :key="item.id" class="selected-name">
            <span>{{ item.name }}</span>
            <i class="el-icon-delete" @click="handleDeleteNode(index)"></i>
          </li>
        </ul>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="open = false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit" size="small">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getMajorList } from '@/api/business'
import { MessageBox } from 'element-ui'
import { cloneDeep } from 'lodash'
export default {
  name: 'MajorSelect',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultMajors: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    visible(val) {
      if (this.defaultMajors?.length > 0) {
        this.$refs.tree && this.$refs.tree.setCheckedKeys(this.defaultMajors.map((i) => i.majorClassifyId))
        this.selectedNodes = this.defaultMajors.map((i) => ({
          id: i.majorClassifyId,
          code: i.majorClassifyCode,
          name: i.majorClassifyName
        }))
      } else {
        this.$refs.tree && this.$refs.tree.setCheckedKeys([])
        this.selectedNodes = []
      }
      this.open = val
    }
  },
  data() {
    return {
      ids: [],
      open: false,
      treeProps: {
        label: 'name',
        value: 'id',
        code: 'code',
        isLeaf: function (data, node) {
          return data.typeClassify === 2
        }
      },
      selectedNodes: [],
      loading: false
    }
  },
  methods: {
    loadNode(node, resolve) {
      const params = node.level === 0 ? {} : { parentId: node.data.id }
      this.loading = true
      getMajorList(params)
        .then((res) => {
          resolve(res.data)
          if (this.defaultMajors) {
            this.$refs.tree.setCheckedKeys(this.defaultMajors.map((i) => i.majorClassifyId))
          }
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    nodeClickHandler() {},
    nodeCheckHandler(data, node) {
      const leafNodes = node.checkedNodes.filter((i) => i.typeClassify === 2)
      this.selectedNodes = leafNodes
    },
    closeDialog() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      const arr = this.selectedNodes
      if (arr.length === 0) {
        return MessageBox.alert('请选择专业', '提示')
      }
      this.$emit('onOK', cloneDeep(this.selectedNodes))
    },
    handleDeleteNode(index) {
      const arr = cloneDeep(this.selectedNodes)
      arr.splice(index, 1)
      this.selectedNodes = arr
    }
  }
}
</script>
<style scoped>
.major-select-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.tree-wrapper {
  flex-grow: 1;
}
.result-wrapper {
  width: 300px;
  margin-left: 15px;
}
.tree-wrapper .tree-box,
.result-wrapper .result-list {
  min-height: 400px;
  max-height: 500px;
  overflow: auto;
}
.tree-wrapper > .title,
.result-wrapper > .title {
  height: 30px;
  background-color: #ebebeb;
  color: #666;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;
}
ul,
li {
  list-style-type: none;
  padding: 0;
}
.selected-name {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.el-icon-delete {
  cursor: pointer;
}
.tree-box ::v-deep .el-tree-node__content {
  max-width: 500px;
  word-break: break-all;
}
</style>
